<template>
  <div class="goodsinfo-container">
    <!-- 轮播图区域 -->
    <div class="swiper-container card">
      <!-- 轮播图组件默认占满父元素的高度 -->
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="item in goodsimgs" :key="item.id">
          <img :src="item.src" alt="" />
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <!-- 商品信息区域 -->
    <div class="card">
      <div class="card-header">{{ goodsinfo.title }}</div>
      <div class="card-body">
        <div class="goods_info">
          <span>
            市场价：<span class="old-price">￥{{ goodsinfo.market_price }}</span>
          </span>
          &nbsp;
          <span>
            销售价：<span class="now-price">￥{{ goodsinfo.sell_price }}</span>
          </span>
        </div>
        <div class="goods_info count-box">
          <span>购买数量：</span>
          <van-stepper v-model="count" min="1" :max="goodsinfo.stock_quantity" integer />
        </div>
        <div class="goods_info">
          <mt-button size="small" type="primary">立即购买</mt-button>
          <mt-button size="small" type="danger" @click="addToCart">加入购物车</mt-button>
        </div>
      </div>
    </div>

    <!-- 商品参数 -->
    <div class="card">
      <div class="card-header">
        商品参数
      </div>
      <div class="card-body">
        <p class="info-txt">商品货号：{{ goodsinfo.goods_no }}</p>
        <p class="info-txt">库存情况：{{ goodsinfo.stock_quantity }}</p>
        <p class="info-txt">上架时间：{{ goodsinfo.add_time | dateFormat }}</p>
      </div>
    </div>

    <!-- 图文介绍 -->
    <div class="card">
      <div class="card-header">
        图文介绍
      </div>
      <div class="card-body goods-content" v-html="goodsdesc.content"></div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      count: 1
    }
  },
  layout: 'cms',
  validate({ params }) {
    return /^\d+$/.test(params.id)
  },
  async asyncData({ params, $axios }) {
    // 获取轮播图
    let goodsimgs = []
    const { data: res } = await $axios.get('/api/getthumimages/' + params.id)
    if (res.status === 0) {
      goodsimgs = res.message
    }

    // 获取商品信息
    let goodsinfo = {}
    const { data: res2 } = await $axios.get('/api/goods/getinfo/' + params.id)
    if (res2.status === 0 && res2.message.length === 1) {
      goodsinfo = res2.message[0]
    }

    // 获取图文介绍
    let goodsdesc = {}
    const { data: res3 } = await $axios.get('/api/goods/getdesc/' + params.id)
    if (res3.status === 0 && res3.message.length === 1) {
      goodsdesc = res3.message[0]
    }

    // 返回 SSR 中需要用到的 data 数据
    return {
      goodsimgs,
      goodsinfo,
      goodsdesc
    }
  },
  methods: {
    ...mapMutations({
      add: 'carts/add'
    }),
    // 把当前商品添加到购物车
    addToCart() {
      // 组织出一个商品对象
      const goods = {
        id: this.goodsinfo.id,
        pic: this.goodsimgs[0].src,
        goodsname: this.goodsinfo.title,
        price: this.goodsinfo.sell_price,
        count: this.count,
        status: true
      }
      // 调用映射过来的 mutations 函数，将数据存储到 vuex 中
      this.add(goods)
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  box-shadow: 0 1px 1px #aaa;
  border-radius: 2px;
  margin: 8px;
  background-color: #fff;
  padding: 3px;
}
.card-header {
  border-bottom: 1px solid #eee;
  padding: 12px 10px;
  font-size: 16px;
}
.card-body {
  padding: 12px 10px;
}
.info-txt {
  font-size: 12px;
  line-height: 30px;
  color: gray;
}
.swiper-container {
  height: 200px;
  text-align: center;
  img {
    height: 100%;
  }
}
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
}
.goods_info {
  padding: 10px 0;
  color: gray;
  font-size: 12px;
}
.old-price {
  color: gray;
  text-decoration: line-through;
}
.now-price {
  color: red;
  font-weight: bold;
  font-size: 14px;
}
.count-box {
  display: flex;
  align-items: center;
}
</style>
<style>
.goods-content {
  font-size: 12px;
  line-height: 30px;
  color: gray;
}
.goods-content img {
  width: 100% !important;
  display: block;
}
</style>
